<template>
  <el-dialog :model-value="visible" :title="`关联房间设备`" :width="mobile ? '100%' : '30%'" lock-scroll class="body-pd-clear" @close="handleClose">
    <el-row>
      <el-col :span="12" class="item-col">
        <div class="item" @click="openUnbindLock">
          <el-image style="width: 100px; height: 100px"
                    src="/img/lock.png"></el-image>
        </div>
      </el-col>
      <el-col :span="12" class="item-col">
        <div class="item" @click="openUnbindMeter">
          <el-image style="width: 100px; height: 100px"
                    src="/img/meter.png">
          </el-image>
        </div>
      </el-col>
    </el-row>
  </el-dialog>
</template>
<script setup name="AssociateRoom">
import useAppStore from '@/store/modules/app'
import DeviceList from './DeviceList.vue'

const emit = defineEmits()
const props = defineProps({
  visible: {
    type: Boolean,
    default: false
  },
  roomId: {
    type: [Number, String],
    default: ''
  },
  roomName: {
    type: [String],
    default: ''
  },
})

const mobile = computed(() => useAppStore().device === 'mobile')

function handleClose() {
  emit('cancel')
}

function openUnbindMeter() {
  emit('openUnbindMeter')
}

function openUnbindLock() {
  emit('openUnbindLock')
}
</script>

<style scoped>
.item-col {
  text-align: center;
}

.item {
  background: whitesmoke;
  border-radius: 5px;
  margin: 10px 10px;
}
</style>

